<!-- 求购订单 -->
<template>
	<view class="page">
		<!-- <u-navbar :isFixed="true" title="求购订单" :borderBottom="false"></u-navbar> -->
		<pageheader :setting="settingdata"></pageheader>
		<go-top :scrollTop="scrollTop"></go-top>

		<view class="_sticky">
			<view class="tabs">
				<u-tabs :list="tabs" :current="order_type" @change="settype" bg-color="#F8F8F8" active-color="#38BE8C"
					bar-width="60"></u-tabs>

				<view class="P130">
					<view class="searchContent">
						<u-icon name="search" color="#B1B8C8" size="28" class="search_icon" @click="demand"></u-icon>
						<u-input v-model="searchKey" placeholder="搜索商品名称、订单编号" type="text" confirm-type="search"
							:border="false" placeholderStyle="color:#B1B8C8" class="search_" @confirm="demand"
							:clearable="false" />
						<u-icon name="close-circle" color="#C0C4CC" size="28" class="search_icon_c" @click="clear"
							v-if="searchKey.length>0">
						</u-icon>
					</view>
				</view>
			</view>
		</view>
		<block v-if="order_type<6">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="flex_bet_align">
					<view class="buyer">卖家：{{item.joinseller.name}}</view>
					<view class="status" v-if="item.status==1">待确认</view>
					<view class="status" v-if="item.status==2">待付款</view>
					<view class="status" v-if="item.status==3">待发货</view>
					<view class="status" v-if="item.status==4">待收货</view>
					<view class="status" v-if="item.status==5">待评价</view>
					<view class="status" v-if="item.status==6">已完成</view>
					<view class="status" v-if="item.status==7">已拒绝</view>
					<view class="status" v-if="item.status==8">已取消</view>
					<view class="status" v-if="item.status==9">已评价</view>
					<view class="status" v-if="item.status==10">售后中</view>
					<view class="status" v-if="item.status==11">售后已完成</view>
				</view>
				<view class="goods flex_align" @click="goDetail(item.id)">
					<image class="goodsImg" :src="item.getgoods.image"></image>
					<view class="content">
						<view class="goodsName clamp2">{{item.getgoods.title}}</view>
						<view class="goodsName " v-if="item.getgoods.spec_value">{{item.getgoods.spec_value}}</view>
						<view class="price">￥{{item.getgoods.money}}/{{item.getgoods.unit}}</view>
						<!-- <view class="sku">产品规格产品规格</view> -->
					</view>
				</view>
				<view class="detail"><text>购买数量：{{item.number}}{{item.getgoods.unit}}</text> 总价：￥{{item.count_price}}
				</view>
				<view class="btn_group flex_align">
					<view class="btn_fill" v-if="item.status==2" @click="pay(item.id)">立即支付</view>
					<view class="btn" v-if="item.status==1||item.status==2" @click="operate(item.id,8)">取消订单</view>
					<view class="btn" v-if="item.status==6||item.status==7||item.status==8||item.status==11"
						@click="deleteOrder(item.id)">删除订单</view>
					<view class="btn_fill" v-if="item.status==4" @click="operate(item.id,5)">确认收货</view>
					<!-- <view class="btn" v-if="item.status==4" @click="expressDetail(item.id)">查看物流</view> -->
					<view class="btn_fill" v-if="item.status==5" @click="goEvaluate(item.id)">立即评价</view>
					<view class="btn_fill" v-if="item.status>=3&&item.status<10&&item.status!=7&&item.status!=8"
						@click="goAfterSale(item.id)">申请售后</view>
					<view class="btn" @click="chat(item)">聊一聊</view>
					<view class="btn" @click="dialing(2,item.joinseller.id,item.joinseller.mobile)">联系卖家</view>
				</view>
			</view>
		</block>
		<!-- 求购售后列表 -->
		<block v-if="order_type==6">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="flex_bet_align" v-if="item.after_type==2||item.after_type==4">
					<view class="buyer">卖家：{{item.joinseller.name}}</view>
					<view class="status" v-if="item.after_status==1">审核中</view>
					<view class="status" v-if="item.after_status==2">已通过</view>
					<view class="status" v-if="item.after_status==3">已拒绝</view>
					<view class="status" v-if="item.after_status==4">已取消</view>
					<view class="status" v-if="item.after_status==5">回寄中</view>
					<view class="status" v-if="item.after_status==6">已补货</view>
					<view class="status" v-if="item.after_status==7">回寄中</view>
					<view class="status" v-if="item.after_status==8">售后已完成</view>
					<view class="status" v-if="item.after_status==9">售后已完成</view>
				</view>
				<view class="flex_bet_align" v-if="item.after_type==1||item.after_type==3">
					<view class="buyer">卖家：{{item.joinseller.name}}</view>
					<view class="status" v-if="item.after_status==1">审核中</view>
					<view class="status" v-if="item.after_status==2&&item.after_type==1">退款成功</view>
					<view class="status" v-if="item.after_status==2&&item.after_type==3">已通过</view>
					<view class="status" v-if="item.after_status==3">已拒绝</view>
					<view class="status" v-if="item.after_status==4">已取消</view>
					<view class="status" v-if="item.after_status==5">回寄中</view>
					<view class="status" v-if="item.after_status==6">退款成功</view>
					<view class="status" v-if="item.after_status==9">售后已完成</view>
				</view>
				<view class="goods flex_align" @click="goafterSalesDetail(item.id)">
					<image class="goodsImg" :src="item.goods_info.image"></image>
					<view class="content">
						<view class="goodsName clamp2">{{item.goods_info.title}}</view>
						<view class="goodsName " v-if="item.goods_info.spec_value">{{item.goods_info.spec_value}}</view>
						<view class="price">￥{{item.goods_info.money}}/{{item.goods_info.unit}}</view>
					</view>
				</view>
				<view class="detail"><text>购买数量：{{item.order_goods_num}}{{item.goods_info.unit}}</text>
					售后总价：￥{{item.after_money}}</view>
				<view class="btn_group flex_align">
					<view class="btn_fill"
						v-if="(item.after_status==7&&item.after_type==4)||(item.after_status==5&&item.after_type==2)"
						@click="setAfterSale(item.id,9)">确认收货</view>
					<view class="btn_fill" v-if="item.after_status==2&&(item.after_type==3||item.after_type==4)"
						@click="goafterSalesDetail(item.id)">前往退货</view>
					<view class="btn_fill" v-if="(item.after_status==1||item.after_status==2)&&item.after_type!=1"
						@click="setAfterSale(item.id,4)">取消申请</view>
					<view class="btn" v-if="item.after_status==4||item.after_status==11">删除订单</view>
					<view class="btn" @click="chat(item)">聊一聊</view>
					<view class="btn" @click="dialing(2,item.joinseller.id,item.joinseller.mobile)">联系卖家</view>
				</view>
			</view>
		</block>
		<!-- <view @click="goSupply" class="fixed">
			<view>供应</view>
			<view>订单</view>
		</view> -->
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wdingdan.png" mode="widthFix"></image>
			<view class="text">暂无订单</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				settingdata: {
					name: '求购订单',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "damandOrder"
				},
				tabs: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待收货'
					},
					{
						name: '待评价'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					},
					{
						name: '售后管理'
					}
				],
				order_type: 0,
				status: 0, //0待确认1待发货2待结算3售后
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				searchKey: "",
			}
		},
		onLoad(options) {
			_this = this
			console.log(options, '求购')
			if (options.order_type) {
				this.order_type = options.order_type
			}
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			if (_this.order_type == 6) {
				$paginator = new _this.$paginator(_this.$api)
				_this.getafterSale(true)
			} else {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			}
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			// 查询数据
			demand() {
				if (_this.order_type == 6) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getafterSale(true)
				} else {
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				}
			},
			clear() {
				_this.searchKey = ""
				console.log(_this.searchKey)
				if (_this.order_type == 6) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getafterSale(true)
				} else {
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				}
			},
			//内层刷新这层
			isonshow() {
				if (_this.order_type == 6) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getafterSale(true)
				} else {
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				}
			},
			getdata: function(firstLoad = false) {
				let data = {}
				data.tab_type = 1
				data.search = _this.searchKey
				if (_this.order_type == 0) {
					data.order_type = 0
				} else if (_this.order_type == 1) {
					data.order_type = 2
				} else if (_this.order_type == 2) {
					data.order_type = 4
				} else if (_this.order_type == 3) {
					data.order_type = 5
				} else if (_this.order_type == 4) {
					data.order_type = 6
				} else if (_this.order_type == 5) {
					data.order_type = 8
				}
				$paginator.getData('getmyorder', data, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			getafterSale: function(firstLoad = false) {
				$paginator.getData('getafterorder', {
					tab_type: 1,
					search: _this.searchKey
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			// 设置状态
			settype(e) {
				_this.list = []
				_this.order_type = e
				_this.searchKey = ""
				if (e == 6) {
					$paginator = new _this.$paginator(_this.$api)
					_this.getafterSale(true)
				} else {
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				}
			},
			// 跳转到详情
			goDetail(id) {
				uni.navigateTo({
					url: "/personal/orderDetail?type=1&id=" + id
				})
			},

			//立即评价
			goEvaluate(id) {
				uni.navigateTo({
					url: "/personal/orderEvaluate?id=" + id
				})
			},
			//申请售后
			goAfterSale(id) {
				uni.navigateTo({
					url: "/personal/afterSales?id=" + id
				})
			},
			//跳转到售后详情
			goafterSalesDetail(id) {
				uni.navigateTo({
					url: "/personal/afterSalesDetail?type=1&id=" + id
				})
			},

			//订单操作
			operate(id, type) {
				if (type == 1) {
					uni.navigateTo({
						url: "/personal/orderDetail?type=1&id=" + id
					})
				}
				if (type == 8 || type == 5) {
					let title = "确认本次操作"
					if (type == 8) {
						title = "确认取消订单？"
					} else if (type == 5) {
						title = "确认收货？"
					}
					uni.showModal({
						content: title,
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("myorderoperate", {
									order_id: id,
									order_status: type
								}).then(data => {
									$paginator = new _this.$paginator(_this.$api)
									_this.getdata(true)
								});
							}
						}
					});
				}
			},
			// 删除订单
			deleteOrder(id) {
				uni.showModal({
					content: '确认删除订单？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delmyorder", {
								order_id: id
							}).then(data => {
								$paginator = new _this.$paginator(_this.$api)
								_this.getdata(true)
							});
						}
					}
				});
			},
			// 查看物流
			expressDetail(id) {
				uni.navigateTo({
					url: "expressDetail?id=" + id
				})
			},
			// 立即支付
			pay(id) {
				uni.navigateTo({
					url: "orderPay?outnumber=2&id=" + id
				})
			},
			// 售后订单操作
			setAfterSale(id, type) {
				if (type == 4 || type == 9) {
					let title = "确认本次操作"
					if (type == 4) {
						title = "确认取消申请？"
					} else if (type == 9) {
						title = "确认收货？"
					}
					uni.showModal({
						content: title,
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("afteroperation", {
									after_id: id,
									after_status: type
								}).then(data => {
									$paginator = new _this.$paginator(_this.$api)
									_this.getafterSale(true)
								});
							}
						}
					});
				}
			},
			//拨号并记录
			dialing(call_type, client_uid, mobile) {
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: call_type
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},

			// 跳转到聊天
			chat(item) {
				item.getgoods.number = item.number
				item.getgoods.name = item.joinseller.name

				console.log(item)
				wx.setStorageSync('list', item.getgoods)
				uni.navigateTo({
					url: '../chat/chatingroom?type=4' + '&member_type=1'
				})
			},
			//跳转求购订单
			goSupply() {
				wx.redirectTo({
					url: "/personal/supplyOrder"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		padding-bottom: env(safe-area-inset-bottom);
		min-height: 100vh;
	}

	._sticky {
		position: sticky;
		top: calc(84rpx + var(--status-bar-height));
		background: #fff;
		z-index: 9;

		.P130 {
			padding: 10rpx 30rpx;
		}

		.searchContent {
			width: 100%;
			height: 74rpx;
			border-radius: 37rpx;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-right: 28rpx;

			.search_icon {
				margin-left: 32rpx;
			}

			.search_icon_c {
				margin-right: 32rpx;
			}

			.search_ {
				color: #2C3240;
				font-size: 26rpx;
				flex: 1;
				margin: 0 14rpx;
			}
		}
	}

	.tabs {
		padding: 10rpx 0;
		position: sticky;
		top: 0rpx;
		background-color: #F8F8F8;
	}

	.top_index {
		width: 50%;
		line-height: 88rpx;
		text-align: center;
	}

	.red {
		color: #38BE8C;
	}

	.card {
		background-color: #FFFFFF;
		padding: 24rpx 30rpx;
		margin-bottom: 20rpx;

		.buyer {
			font-size: 28rpx;
			color: #333333;
		}

		.status {
			font-size: 28rpx;
			color: #999999;
		}

		.goods {
			padding: 28rpx 0 38rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.goodsImg {
				width: 180rpx;
				height: 180rpx;
				background: #EEEEEE;
				margin-right: 22rpx;
			}

			.content {
				width: 480rpx;
			}

			.goodsName {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				height: 72rpx;
			}

			.price {
				font-size: 24rpx;
				font-weight: 500;
				color: #f73f3f;
				margin: 8rpx 0 14rpx;
			}

			.sku {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.detail {
			font-size: 28rpx;
			font-weight: 500;
			text-align: right;
			color: #333333;
			margin: 30rpx 0;

			text {
				margin-right: 20rpx;
			}
		}

		.btn_group {
			flex-direction: row-reverse;
		}

		.btn {
			width: 152rpx;
			height: 70rpx;
			background: #ffffff;
			border: 1rpx solid #333333;
			border-radius: 37rpx;
			font-size: 26rpx;
			font-weight: 400;
			text-align: center;
			line-height: 70rpx;
			color: #333333;
			margin-left: 26rpx;

			&:last-child {
				margin-left: 0;
			}
		}

		.btn_fill {
			width: 152rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #38be8c, #06adba 96%);
			border-radius: 36rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
			margin-left: 26rpx;
		}
	}

	.fixed {
		width: 116rpx;
		height: 114rpx;
		background: linear-gradient(90deg, #38be8c, #06adba 96%);
		border-radius: 58rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx #c3e5dc;
		text-align: center;
		color: #ffffff;
		padding-top: 20rpx;
		position: fixed;
		right: 32rpx;
		bottom: 488rpx;
		box-sizing: border-box;
	}
</style>
